<template>
  <div id="userLoginView">
    <h2>用户登录</h2>
  <a-form
  style="max-width: 480px; margin: 0 auto;"
   label-align="left"
    auto-label-width
     :model="form"
       @submit="handleSubmit"
       >
    <a-form-item 
    field="userAccount" 
     label="账号"
     >
      <a-input
        v-model="form.userAccount"
        placeholder="请输入用户名"
      />
    </a-form-item>
    <a-form-item field="userPassword" tooltip="密码不少于8位" label="密码">
      <a-input-password v-model="form.userPassword" placeholder="请输入密码" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit" style="width: 120px;">登录</a-button>
    </a-form-item>
  </a-form>
  </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import {UserControllerService,UserLoginRequest} from "../../../generated"
import  message  from '@arco-design/web-vue/es/message';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
    //表单信息
    const form = reactive({
      userAccount: '',
      userPassword: '',
    }as UserLoginRequest);
    const router=useRouter();
    const store=useStore();
    //提交表单
    const handleSubmit = async() => {
      const res=await UserControllerService.userLoginUsingPost(form);
      if(res.code===0){
        await store.dispatch("user/getLoginUser");
        //登录成功返回主页面
        message.success("登陆成功"+JSON.stringify(form));
        router.push({
          path:'/',
          replace:true,
        })
      }else{
        message.error("登录失败"+res.message);
      }

    };


</script>